@page "/edit-product/{Id:guid}"
@attribute [Authorize]
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager

<div class="card">
  <div class="card-header">
    Edit the Product
  </div>
  <div class="card-body">
    <EditForm Model="@_productModel" OnValidSubmit="HandleValidSubmit">
      <DataAnnotationsValidator/>
      <ValidationSummary/>
      <p class="form-group">
        <label class="control-label">
          Name
        </label>
        <InputText id="name" @bind-Value="_productModel.Name" class="form-control"/>
      </p>

      <p class="form-group">
        <label class="control-label">
          Price
        </label>
        <InputNumber id="price" @bind-Value="_productModel.Price" class="form-control"/>
      </p>

      <p class="form-group">
        <label class="control-label">
          Category
        </label>
        <InputSelect id="categoryId" @bind-Value="_productModel.CategoryId" class="form-control">
          <option value="">Select...</option>
          @foreach (var cat in _categories)
          {
            if (cat.Key == _productModel.CategoryId)
            {
              <option value="@cat.Key" selected>@cat.Value</option>
            }
            else
            {
              <option value="@cat.Key">@cat.Value</option>
            }
          }
        </InputSelect>
      </p>

      <p class="form-group">
        <label class="control-label">
          Store
        </label>
        <InputSelect id="storeId" @bind-Value="_productModel.StoreId" class="form-control disabled">
          <option value="">Select...</option>
          @foreach (var store in _stores)
          {
            if (store.Key == _productModel.StoreId)
            {
              <option value="@store.Key" selected>@store.Value</option>
            }
            else
            {
              <option value="@store.Key">@store.Value</option>
            }
          }
        </InputSelect>
      </p>

      <p class="form-group">
        <label class="control-label">
          Image
        </label>
        <InputText id="imageUrl" @bind-Value="_productModel.ImageUrl" class="form-control"/>
      </p>

      <p class="form-group">
        <label class="control-label">
          Description
        </label>
        <InputText id="description" @bind-Value="_productModel.Description" class="form-control"/>
      </p>

      <p class="form-group">
        <label class="control-label">
          ROP (Re-order Point)
        </label>
        <InputNumber id="rop" @bind-Value="_productModel.Rop" class="form-control"/>
      </p>

      <p class="form-group">
        <label class="control-label">
          EOQ (Economic Order Quantity)
        </label>
        <InputNumber id="eoq" @bind-Value="_productModel.Eoq" class="form-control"/>
      </p>

      <button type="submit" class="btn btn-outline-primary">Save</button>
    </EditForm>
  </div>
</div>

@code {

  [Parameter]
  public Guid Id { get; set; }

  private readonly EditProductModel _productModel = new EditProductModel();
  IList<KeyValueModel> _categories = new List<KeyValueModel>();
  IList<KeyValueModel> _stores = new List<KeyValueModel>();

  protected override async Task OnInitializedAsync()
  {
    _productModel.Id = Id.ToString();
    _categories = await HttpClient.GetJsonAsync<List<KeyValueModel>>("api/products/categories");
    _stores = await HttpClient.GetJsonAsync<List<KeyValueModel>>("api/inventories/stores");

    var product = await HttpClient.GetJsonAsync<ProductItemDetailModel>($"api/products/{Id}");
    if (product != null)
    {
      _productModel.Name = product.Name;
      _productModel.Price = product.Price;
      _productModel.ImageUrl = product.ImageUrl;
      _productModel.StoreId = product.StoreId.ToString();
      _productModel.CategoryId = product.CategoryId.ToString();
      _productModel.Description = product.Description;
    }
  }

  private async Task HandleValidSubmit()
  {
    await HttpClient.PutJsonAsync("/api/products", _productModel);
    NavigationManager.NavigateTo("/products");
  }

}
